<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../include.jsp"%>

<div class="fly-panel fly-panel-user" pad20="">
	<div class="layui-tab layui-tab-brief" lay-filter="user-sign">
		<ul class="layui-tab-title">
			<li class="layui-this">登陆</li>
			<li>注册</li>
		</ul>
		<div class="layui-form layui-tab-content">
			<!-- register -->
			<div class="layui-tab-item layui-show">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<label class="layui-form-label">登陆帐号</label>
						<div class="layui-input-block">
							<input type="text" name="userName" id="userName" placeholder="请输入登陆帐号" autocomplete="off" class="layui-input">
						</div>
					</div>
					
					<div class="layui-form-item">
						<label class="layui-form-label">登陆密码</label>
						<div class="layui-input-block">
							<input type="password" name="password" id="pwd" placeholder="请输入登陆帐号" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-input-block">
							<button class="layui-btn" id="studentLogin">登陆</button>
						</div>
					</div>
				</form>
			</div>
			<!-- login start -->
			<div class="layui-tab-item">
					<form class="layui-form" action="">
						<div class="layui-form-item">
							<label class="layui-form-label">学生姓名</label>
							<div class="layui-input-block">
								<input type="text" name="name" lay-verify="name" placeholder="请输入学生姓名" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">登陆帐号</label>
							<div class="layui-input-block">
								<input type="text" name="account" lay-verify="account" placeholder="请输入登陆帐号" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">登陆密码</label>
							<div class="layui-input-block">
								<input type="password" name="password" id="password"  lay-verify="password2" placeholder="请输入登陆密码" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">登陆密码</label>
							<div class="layui-input-block">
								<input type="password" name="password2" id="password2" placeholder="请再次输入登陆密码" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
						    <label class="layui-form-label">学生性别</label>
						    <div class="layui-input-block">
						      <input type="radio" name="sex" value="MALE" title="男" checked>
						      <input type="radio" name="sex" value="FEMALE" title="女">
						    </div>
						</div>
						<div class="layui-form-item">
						    <label class="layui-form-label">所属班级</label>
						    <div class="layui-input-block">
						      <select name="classes.classesId" lay-verify="required" lay-search="">
						          <option value="">请选择所属班级</option>
						          <c:forEach items="${classes }" var="classes">
							          <option value="${classes.classesId }">${classes.name }</option>
						          </c:forEach>
						        </select>
						    </div>
						</div>
						<div class="layui-form-item">
						    <label class="layui-form-label">联系电话</label>
						    <div class="layui-input-block">
						      <input type="tel" name="tel" lay-verify="phone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
						    </div>
						</div>
						
						<div class="layui-form-item">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="studentRegister">立即注册</button>
							</div>
						</div>
					</form>
			</div>
		</div>
	</div>
</div>
<script>
	layui.use(['form','laydate','element'], function() {
		var form = layui.form(),
		$ = layui.jquery,
		element = layui.element();
		
		//自定义验证规则
		  form.verify({
			  name: function(value){
			      if(value.length < 2){
			        return '学生姓名至少得4个字符啊';
			      }
			  },
			
			  password2:function(value){
				  if(value.length < 6){
				        return '密码必须6到12位';
				  }
				  if(value != $('#password2').val()){
					  return '两次密码不一致';
				  }
			  },
			  account:function(value){
				  var regu = "^[0-9a-zA-Z]+$";
				  var re = new RegExp(regu);
				  if (!re.test(value)) 
					  return '登陆帐号只能由4-12数字英文组合';
				  
				  if(value.length < 4 || value.length > 12){
				        return '登陆帐号只能由4-12数字英文组合';
				  }
			  }
		  
		    
		  });
		//监听提交
		$('#studentLogin').on('click', function() {
		//	layer.msg(JSON.stringify(data.field));
			var userName = $('#userName').val() ;
			var password = $('#pwd').val() ;
			
			var regu = "^[0-9a-zA-Z]+$";
			var re = new RegExp(regu);
			if (!re.test(userName)) {
			  	layer.msg('登陆帐号只能由4-12数字英文组合',{icon: 5});
				return false;
			}
			
				  
				  
		   if(password.length < 6 || password.length > 12){
			  	layer.msg('密码必须6到12位',{icon: 5});
				return false;
			}
			
			var tmpIndex = layer.load({shade: [0.8, '#393D49']});
		    $.post('${ctx}/common/student/doAjaxLogin',{rememberMe :false,userName :userName,password :password},function(rst){
		    	console.debug(rst);
		    	layer.close(tmpIndex);
		    	if(!rst){
		    		layer.msg('网络连接错误，请稍后再试。。。', {
		    			icon: 2,
		    			shade: [0.8, '#393D49'],
	    			  	anim: 6
	    			});
		    		return ;
		    	}
		    	
		    	if('error' == rst.code){
		    		layer.msg(rst.message, {
		    			time:2000,
		    			icon: 2,
		    			shade: [0.8, '#393D49'],
	    			  	anim: 6
	    			});
		    		return ;
		    	}
		    	if('success' == rst.code){
		    		window.location.href="/student/sign/${teacherId}/${courseId}" ;
		    	}
		    },'json');
		
			return false;
		});
		
		form.on('submit(studentRegister)', function(data) {
			//	layer.msg(JSON.stringify(data.field));
				var tmpIndex = layer.load({shade: [0.8, '#393D49']});
			    $.post('${ctx}/common/student/register',data.field,function(rst){
			    	console.debug(rst);
			    	layer.close(tmpIndex);
			    	if(!rst){
			    		layer.msg('网络连接错误，请稍后再试。。。', {
			    			icon: 2,
			    			shade: [0.8, '#393D49'],
		    			  	anim: 6
		    			});
			    		return ;
			    	}
			    	
			    	if('error' == rst.code){
			    		layer.msg(rst.message, {
			    			time:2000,
			    			icon: 2,
			    			shade: [0.8, '#393D49'],
		    			  	anim: 6
		    			});
			    		return ;
			    	}
			    	
			    	if('success' == rst.code){
			    		window.location.href="/student/sign/${teacherId}/${courseId}" ;
			    	}
			    	
			    },'json');
			
				return false;
			});
	});
</script>